﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="Inventory.login" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>登录</title>
    <link href="Content/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <style>
        body {
            background-color: #fff;
            background-image: url(content/image/grid-bg.png);
            background-repeat: repeat-x;
        }

         .form label {
            font-size: 14px;
            font-weight: normal;
            line-height: 30px;
            padding-top: 0px !important;
            float: left;
            width: 120px;
            text-align: right;
            margin-right: 15px;
            display: inline-block;
        }

        .form input {
            font-size: 14px;
            width: 250px;
            padding: 5px;
            height: auto;
            border: 1px solid #C9C9C9;
        }

        .control-group {
            margin-top: 16px;
            height:32px;
        }

        .form .reset-labels label {
            line-height: 30px;
            font-size: 12px;
            float: none;
            width: auto;
            text-align: left;
            margin-right: 10px;
        }

        .form .reset-labels input {
            line-height: 30px;
            width: auto;
            border: none;
            padding: 0;
            height: 12px;
        }

        .form-actions {
            margin-left: 135px;
        }
        label.radio {
            text-align:left;
        }
        label.radio input {
            width:30px;
            margin-top: 9px;
        }

        .container {
            width: 878px;
            max-width: 878px;
            margin: 60px auto 0 auto;
            background: #FFF;
        }

        .container-padding {
            padding: 0px 28px;
        }

        .container-h1 {
            padding-left: 70px;
        }


        .normal-main {
            width: 500px;
            float: left;
        }

        label.valid {
            width: 24px;
            height: 24px;
            display: inline-block;
            text-indent: -9999px;
        }

        label.error {
            font-weight: bold;
            color: rgb(127, 33, 139);
            padding: 2px 8px;
            margin-top: 2px;
            width:250px;
            margin-left:135px;
            font-size: 12px;
            text-align: left;
        }

        #signin_remeberme {
            vertical-align: middle;
            margin-top: 0px;
        }

        #passwordresetBtn {
            padding-left: 10px;
        }

        .form-actions {
            background-color: #fff;
            border-top: 0px;
        }

        .cancel {
            margin-left: 20px;
        }

        .normal-side {
            width: 260px;
            float: right;
            margin-top:20px;
        }

        .connect-for-sign {
            margin: 20px 0px;
            font-size: 14px;
            padding: 20px 0px;
            border-top: 1px dashed #ccc;
        }

            .connect-for-sign p {
                line-height: 30px;
            }

        .vam, .vam * {
            vertical-align: middle;
        }

        i.social-icon {
            display: inline-block;
            width: 16px;
            height: 16px;
        }

        i.weibo {
            background-position: 0 0;
        }

        i.qq {
            background-position: 0 -416px;
        }

        .validatecode {
            margin-top:10px;
        }

       
    </style>
</head>

<body class="login">
    <section class="container checkin">
        <div class="container-padding clearfix">
            <h1 class="container-h1">登录</h1>
            <div class="normal-main">
                <form id="checkin-form" class="form form-horizontal" role="form" action="login.aspx?action=checkin" method="post">
                    <div class="control-group">
                        <label for="signin_username" class="control-label">用户名或Email地址</label>
                        <input id="signin_username" type="text" name="_username" class="form-control" placeholder="Email" tabindex="1">
                    </div>
                    <div class="control-group">
                        <label for="signin_password" class="control-label">密码</label>
                        <input id="signin_password" type="password" name="_password" class="form-control" placeholder="密码" tabindex="2">
                    </div>
                    <div class="control-group reset-labels form-actions" style="height: 32px;">
                        <label for="signin_remeberme">
                            <input id="signin_remeberme" type="checkbox" name="_remember_me" tabindex="3">
                            下次自动登录
                                <a id="passwordresetBtn">忘记密码了</a>
                        </label>
                    </div>
                    <div class="control-group form-actions">
                        <input type="hidden" name="_returnPage">
                        <button type="submit" class="btn btn-success" tabindex="4">登录</button>
                        <button type="reset" class="btn cancel">取消</button>
                    </div>
                </form>
            </div>

            <div class="normal-side">
                <p>还没有帐号？ <a id="signinBtn" href="javascript:">立即注册</a></p>
                <div class="connect-for-sign">
                    <p>使用合作方网站帐号登录:</p>
                    <p class="vam"><a href="/connect/weibo/"><i class="social-icon weibo"></i><span>新浪微博帐号</span></a></p>
                    <p class="vam"><a href="/connect/qq/"><i class="social-icon qq"></i><span>QQ帐号</span></a></p>
                </div>
            </div>
        </div>
    </section>

    <section class="container signin" style="display: none;">
        <div class="container-padding clearfix">
            <h1 class="container-h1">注册</h1>
            <div class="normal-main">
                <form id="signin-form" class="form form-horizontal" method="post" action="login.aspx?action=signin">
                    <div class="control-group">
                        <label for="signin_email" class="control-label">你的Email地址</label>
                        <input type="text" id="signin_email" name="Email" required="required">
                    </div>
                    <div class="control-group">
                        <label for="UserName" class="control-label">用户名</label>
                        <input type="text" id="UserName" name="UserName" required="required">
                    </div>
                    <div class="control-group">
                        <label for="pwd" class="control-label">设置密码</label>
                        <input type="password" id="pwd" name="pwd" class="{required:true,minlength:6}">
                    </div>
                    <div class="control-group">
                        <label for="repwd" class="control-label">确认密码</label>
                        <input type="password" id="repwd" name="repwd" class="{required:true,minlength:6,equalTo:'#pwd'}">
                    </div>
                    <div class="control-group">
                        <label for="signin_nickname" class="control-label">昵称</label>
                        <input type="text" id="signin_nickname" name="NickName">
                    </div>
                    <div class="control-group">
                        <label class="control-label">类型</label>
                        <label class="radio inline">
                            <input type="radio" id="type_0" name="type" checked="checked" value="0">
                            档口 
                        </label>
                        <label class="radio inline">
                            <input type="radio" id="type_1" name="type" value="1">
                            卖家 
                        </label>
                    </div>
                    <div class="control-group">
                        <label for="shopName" class="control-label">店铺名称</label>
                        <input type="text" id="shopName" name="shopName">
                    </div>
                    <div class="control-group">
                        <label for="ShopUrl" class="control-label">店铺地址</label>
                        <input type="text" id="ShopUrl" name="ShopUrl">
                    </div>
                    <div class="control-group">
                        <label for="Tel" class="control-label">联系方式</label>
                        <input type="text" id="Tel" name="Tel" required="required">
                    </div>
                    <div class="control-group">
                        <label for="Aliww" class="control-label">阿里旺旺</label>
                        <input type="text" id="Aliww" name="Aliww">
                    </div>
                    <div class="control-group">
                        <label for="signup_verifyCode" class="control-label">验证码</label>
                        <input type="text" id="signup_verifyCode" name="verifyCode" required="required">
                    </div>

                    <div class="form-actions validatecode">
                        <span>
                            <img id="validatecodeimg" src="login.aspx?action=getvalidatecode" style="cursor: pointer">
                            看不清楚？点击上面的图片即可更换
                        </span>
                    </div>

                    <div class="form-actions actions reset-labels reset-inputs">
                        <label for="signup_agreement">
                            <input type="checkbox" name="agreement" id="signup_agreement" checked="checked">
                            我已阅读并接受《<a href="/info/agreement" target="_blank">使用协议</a>》</label>
                    </div>

                    <div class="form-actions">
                        <input type="hidden" id="signup__token" name="_token">
                        <button type="submit" class="btn btn-success">注册</button>
                        <button type="reset" class="btn cancel">取消</button>
                    </div>
                </form>
            </div>

            <div class="normal-side">
                <p>已拥有好知网帐号？ <a class="checkinBtn" href="javascript:">直接登录</a></p>
                <div class="connect-for-sign">
                    <p>使用合作方网站帐号登录:</p>
                    <p class="vam"><a href="/connect/weibo/"><i class="social-icon weibo"></i><span>新浪微博帐号</span></a></p>
                    <p class="vam"><a href="/connect/qq/"><i class="social-icon qq"></i><span>QQ帐号</span></a></p>
                </div>
            </div>
        </div>
    </section>


    <section class="container passwordreset" style="display: none;">
        <div class="container-padding clearfix">
            <h1 class="container-h1">重设密码</h1>
            <div class="normal-main">

                <form id="passwordreset-form" method="post" class="form form-horizontal">
                    <div class="control-group">
                        <label class="control-label">邮箱地址：</label>
                        <input type="text" name="email" class="email">
                    </div>

                    <div class="control-group form-actions">
                        <button type="submit" class="btn btn-success">重设密码</button>
                        <button type="reset" class="btn cancel">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </section>
</body>
<script src="Content/js/jquery-1.7.2.min.js"></script>
<script src="Content/js/bootstrap.min.js"></script>
<script src="Content/js/jquery.validate.js"></script>
<script src="Content/js/messages_cn.js"></script>
<script>
    $(function () {
        $("#checkin-form").validate();
        $("#signin-form").validate({
            rules: {
                UserName: {
                    required: true,
                    remote: { //验证用户名是否存在
                        type: "POST",
                        url: "login.aspx?action=checkusername"
                    }
                },
                Email: {
                    required: true,
                    email: true,
                    remote: { //验证用户名是否存在
                        type: "POST",
                        url: "login.aspx?action=checkemail"
                    }
                },
                pwd: {
                    required: true,
                    minlength: 6
                },
                repwd: {
                    required: true,
                    minlength: 6,
                    equalTo: "#pwd"
                },
                verifyCode: {
                    required: true,
                    remote: { //验证用户名是否存在
                        type: "POST",
                        url: "login.aspx?action=checkverifycode"
                    }
                }
            },
            messages: {
                Email: {
                    required: "请输入Email地址",
                    remote: jQuery.format("该Email已经被注册")
                },
                UserName: {
                    required: "请输入用户名",
                    remote: jQuery.format("该用户名已经被注册")
                },
                pwd: {
                    required: "请输入密码",
                    minlength: jQuery.format("密码不能小于6个字符")
                },
                repwd: {
                    required: "请输入确认密码",
                    minlength: "确认密码不能小于6个字符",
                    equalTo: "两次输入密码不一致"
                },
                verifyCode: {
                    required: "请输入验证码",
                    remote: jQuery.format("验证码错误")
                }
            }
        });
        $("#passwordreset-form").validate();

        $("#signinBtn").click(function () {
            $("section").hide();
            $("section.signin").show();
        });

        $(".checkinBtn").click(function () {
            $("section").hide();
            $("section.checkin").show();
        });

        $("#passwordresetBtn").click(function () {
            $("section").hide();
            $("section.passwordreset").show();
        });

        $("#validatecodeimg").click(function () {
            $(this).attr("src", "login.aspx?action=getvalidatecode&_flag=" + new Date().getMilliseconds());
        })


        $(".vam a").click(function (e) {
            alert("暂未开放此功能");
            e.preventDefault();
        })
    })
</script>

</html>
